import React, { useEffect } from 'react';
import './User.scss';
import UserHeader from '@/views/User/components/UserHeader/UserHeader';
import UserOrder from '@/views/User/components/UserOrder/UserOrder';
import UserGroup from '@/views/User/components/UserGroup/UserGroup';
import { fetchUserInfo } from '@/store/modules/userStore';
import { Toast } from 'antd-mobile';
import { useEnhanceDispatch, useEnhanceSelector } from '@/hooks';

const User: React.FunctionComponent = () => {
  const enhanceDispatch = useEnhanceDispatch();
  const userInfo = useEnhanceSelector(state => state.userStore.userInfo);

  /**
   * @description 获取用户信息的回调函数
   * */
  const handleFetchUserInfo = async () => {
    try {
      await enhanceDispatch(fetchUserInfo()).unwrap();
    } catch (rejectedValueOrSerializedError: any) {
      Toast.show(rejectedValueOrSerializedError);
    }
  };

  useEffect(() => {
    handleFetchUserInfo();
  }, []);

  return (
    <div className="user">
      {/*头部*/}
      <UserHeader></UserHeader>
      {/*药品订单*/}
      <UserOrder></UserOrder>
      {/*快捷工具*/}
      <UserGroup></UserGroup>
    </div>
  );
};

export default User;